<template>
    <el-dialog v-model="dialogVisible" title="法务信息" width="500" @close="closeDialog">
        <div class="box" v-if="info.user_info">
            <el-card>
                <div class="legal-info">
                    <img :src="info.user_info.user_avatar" mode="widthFix" />
                    <div>
                        <dl class="name">
                            <dt>{{ info.user_info.user_name }}</dt>
                            <dd v-if="info.user_info.service_star"><el-tag type="primary">{{ info.user_info.service_star
                                    }}次服务之星</el-tag></dd>
                        </dl>
                        <div class="tag" v-if="info.user_info.party_status == 1">共产党员</div>
                        <div class="tag" v-if="info.user_info.graduation">毕业院校：{{ info.user_info.graduation == '双一流' ?
                            '985 211院校' :
                            info.user_info.graduation }}</div>
                        <div class="tag" v-if="info.user_info.personality_autograph">个性签名：{{
                            info.user_info.personality_autograph }}</div>
                        <el-button type="danger" size="small" style="margin-top: 10px"
                            @click="complaintVisible = true">投诉</el-button>
                    </div>
                </div>
            </el-card>
            <el-card style="margin-top: 15px; max-height: 320px; overflow-y: auto;" v-if="info.eva_list.length > 0">
                <div class="row" v-for="(item, index) in info.eva_list" :key="index">
                    <div>{{ item.content }}</div>
                    <dl>
                        <dt>来自{{ item.user_name }}的评价</dt>
                        <dd>{{ item.create_time }}</dd>
                    </dl>
                </div>
            </el-card>
        </div>
    </el-dialog>
    <el-dialog v-model="complaintVisible" title="投诉法务" width="500">
        <el-input v-model="complaintInfo" style="width: 100%; height: 200px;" :rows="5" type="textarea"
            placeholder="请输入您的投诉意见" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="complaintVisible = false">取消</el-button>
                <el-button type="primary" @click="addComplaint">
                    提交投诉
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watchEffect, defineEmits } from '../../../adapter-vue';
import { GetLegalInfo, AddComplaint } from '@/api';
import { ElMessage } from 'element-plus'
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    laId: {
        type: String,
        default: '',
    },
    groupId: {
        type: String,
        default: '',
    }
});
const emits = defineEmits(['closeDialog']);
const dialogVisible = ref(false)
const legal_Id = ref('')
const info = ref({});
const complaintVisible = ref(false)
const complaintInfo = ref('')
const group_id = ref('')

watchEffect(() => {
    dialogVisible.value = props.visible;
    legal_Id.value = props.laId;
    group_id.value = props.groupId;
    if (legal_Id.value) {
        legalInfo(legal_Id.value);
    }
})

function legalInfo(e: any) {
    GetLegalInfo({
        im_id: e
    }).then(res => {
        info.value = res.data
    })
}

function closeDialog() {
    dialogVisible.value = false
    info.value = {}
    legal_Id.value = ''
    emits('closeDialog')
}

function addComplaint(){
    AddComplaint({
        content: complaintInfo.value,
        legal_id: info.value.user_info.id,
        group_id: group_id.value
    }).then(res => {
        complaintVisible.value = false
        complaintInfo.value = ''
        ElMessage({
            message: '投诉成功',
            type: 'success',
        })
    })
}
</script>
<style lang="scss" scoped>
a {
    color: #679ce1;
}

.box {
    height: 550px;
    overflow-y: auto;

    .file {
        li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 30px;
        }
    }
}

.legal-info {
    display: flex;
    padding-bottom: 10rpx;

    img {
        width: 140px;
        border-radius: 10px;
        flex-shrink: 0;
        margin-right: 10px;
    }

    .name {
        display: flex;
        align-items: center;

        dt {
            font-size: 16px;
            color: #282F3E;
        }

        dd {
            margin-left: 10px;
        }
    }

    .tag {
        font-size: 14px;
        color: #585D69;
        margin-top: 5px;
    }
}

.row {
    margin-bottom: 10px;

    &+.row {
        border-top: solid 1px #eee;
        padding-top: 10px;
    }

    view {
        font-size: 14px;
        color: #282F3E;
    }

    dl {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        dt,
        dd {
            font-size: 12px;
            color: #666666
        }
    }
}
</style>
